<template>
  <a-row >
    <a-col>
      <a-card :bordered="false" style="margin-bottom: 10px">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form-model layout="inline" ref="ruleForm" :model="queryParam">
            <z-form-item :datas="fieldArr" :form="queryParam" :gutter="24" :toggle="toggleSearchStatus">
              <a-col :span="8" slot="submit-action">
                <a-space :size="6">
                  <a-button type="primary" @click="onQuery" icon="search">查询</a-button>
                  <a-button @click="onResetForm" icon="reload">重置</a-button>
                </a-space>
              </a-col>
            </z-form-item>
          </a-form-model>
        </div>
      </a-card>
      <a-card :bordered="false">

        <!-- 表格展示 -->
        <div class="table-page-content">
          <z-table
            ref="table"
            rowKey="rowKey"
            :showAlert="false"
            :showSelection="false"
            :loading="loading"
            :columns="columns"
            :dataSource="pageData"
            @selectedRow="onSelectedRow"
            @change="onTableChange"
          >
            <template slot="action" slot-scope="text, record">
              <a @click="looks(record)">查看</a>
            </template>
          </z-table>
        </div>
        <!--弹窗区域-->
      </a-card>
    </a-col>
  </a-row>
</template>

<script>

import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin'
import {listFor,listForm} from "@views/sjsk/modules/list";
import {profileList} from "@api/sjsk/archives";

export default {
  components: {},
  mixins: [],
  data() {
    return {
      loading:false,
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      rangePickerTime: [],
      show: false,
      closeTip: false,
      visible: false,
      handleModalBool: false,
      isDisabled: true,
      reloading: false,
      toggle: true,
      selectKeys: [],
      form: {},
      queryParam: {},
      handleModalTitle: null,
      /* 查询折叠 */
      toggleSearchStatus:true,
      fieldArr: [
        {label: '姓名', prop: 'sjsk_user_name', tagType: 'input', span: 5},
        {label: '当前类型', prop: 'profile_type', tagType: 'dict-select', dictCode:'personType', span: 5},
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) => {
            return `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
          }
        },
        {
          title: '姓名',
          dataIndex: 'sjskUserName',
          width: 60,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '身份证号',
          dataIndex: 'identityNumber',
          width: 110,
          align: 'left',
          customRender: text => {
            return <j-ellipsis value={text} length={20} />
          }
        },
        {
          title: '当前类型',
          dataIndex: 'profileType',
          width: 80,
          align: 'center',
          customRender: text => {
            return this.$filterDictTextByCache('personType', String(text)) ?
              this.$filterDictTextByCache('personType', String(text)) : '--'
            // return text
          }
        },
        {
          title: '联系电话',
          dataIndex: 'sjskUserPhone',
          width: 100,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '户籍地',
          dataIndex: 'areaCodeStr',
          width: 80,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '操作',
          width: 120,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        }
      ],
      pageFilter: {
        pageNo: 1,
          pageSize: 10
      },
      pageData:[]
    }
  },
  created() {},
  mounted() {
    this.onQuery()
  },
  methods: {

    looks(val){
      this.$router.push({
        path: '/holographicArchives/index',
        query: {

          profileType:val.profileType,
          sjskId: val.id,
          sjskCode:val.caseNo,
          personStage:val.personStage
        }
      })
    },
    onResetForm() {
      this.queryParam = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
      // this.$refs.ruleForm.ruleForm()
    },
    renovate(){
      this.refreshTable()
    },
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },

    onQuery() {
      // this.pageFilter.pageNo = 1
      // this.refreshTable()
      // this.$refs.ruleForm.validate((valid) => {
      //   if (valid) {
          // console.log(this.queryParam)
          this.pageFilter.pageNo = 1
          this.pageFilter.pageSize = 10
          this.refreshTable()
      //   } else {
      //     return false
      //   }
      // })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    onSelectedRow(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length <= 0
    },


    refreshTable() {
      let form = Object.assign({}, this.queryParam, this.pageFilter)
      this.loading = true
      profileList(form).then(res => {
          console.log(res)
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.loading = false
            this.$refs.table.onClearRowKeys()
          } else {
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },

  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
</style>
